<template>
  <!-- v-bind 或者 :属性  的作用   -->
<!-- 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。 -->

  <div class="header">
    <div class="content-wraper">
      <div class="avatar">
        <img width="64" height="64" :src="seller.avatar">  
      </div>
      <div class="content">
        <div class="title"> 
          <span class="brand"> </span>
          <span class="name">{{seller.name}} </span>
        </div> 
        <div class="description">
            {{seller.description}}/{{seller.deliveryTime}}分钟送达
        </div>
        <div v-if="seller.supports" class="support"> 
            <span class="icon" :class="classMap[seller.supports[0].type]"></span>
            <span class="text"> {{seller.supports[0].description}} </span>
        </div>
       </div>
    </div>
     

    <div> 
      
    </div>
    <div class='bulletin-wrapper'>
      
    </div>

  </div> 
 
</template>

<script>
export default {
  props:['seller'],
  // 数据都要通过对象返回
  data() {
    return {
       //"seller": {}
    }
  },
  created() {
     this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
  }
 
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixins.styl"
  
  .header
    color: #fff
    background-color #000
    .content-wraper
      padding-left 48px
      padding-top 48px
      padding-bottom 36px
      padding-right 24px
      font-size 0
      .avatar
        display inline-block
          
      .content
        display inline-block
        margin-left 16px
        font-size 14px
        .title
          margin 2px 0 8px 0
          .brand
            display inline-block
            vertical-align top
            width 30px
            height 18px
            bg-image("./brand")
            background-size 30px 18px
            background-repeat none
          .name
            margin-left 6px
            font-size 16px
            line-height 18px
            font-weight bold
        .description
            font-size 12px
            color rgb(255, 255, 255)
            font-weight 200
            line-height 12px
            margin-bottom 10px
        .support
          .icon
            display inline-block
            width 12px
            height 12px
            margin-right 4px
            background-size 12px 12px
            background-repeat no-repeat
            //动态启用背景图片
            &.decrease
              bg-image("./decrease_2")
            &.discount
              bg-image("./discount_1")
            &.guarantee
              bg-image("./guarantee_1")
            &.invoice
              bg-image("./invoice_1")
            &.special
              bg-image("./special_1")
</style> 


